	*{
		margin:0;
		padding:0;
	}
	li{
		list-style: none;
	}
	.box{
		width:400px;
		height:400px;
		position: relative;
		margin:300px auto;

		-webkit-transform-style:preserve-3d;
		-webkit-transform:rotateX(13deg) ;
		-webkit-animation:move 5s linear infinite;

	}
	.minbox{
		width:200px;
		height:200px;
		position: absolute;
		left:100px;
		top:100px;
		-webkit-transform-style:preserve-3d;
	}
	.minbox li{
		width:200px;
		height:200px;
		position: absolute;
		left:0;
		top:0;
	}
	.minbox li:nth-child(1){
		background: url(../../img/mofangimg/01.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:translateZ(100px);
	}
	.minbox li:nth-child(2){
		background: url(../../img/mofangimg/02.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:rotateX(180deg) translateZ(100px);
	}
	.minbox li:nth-child(3){
		background: url(../../img/mofangimg/03.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:rotateX(-90deg) translateZ(100px);
	}
	.minbox li:nth-child(4){
		background: url(../../img/mofangimg/04.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:rotateX(90deg) translateZ(100px);
	}
	.minbox li:nth-child(5){
		background: url(../../img/mofangimg/05.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:rotateY(-90deg) translateZ(100px);
	}
	.minbox li:nth-child(6){
		background: url(../../img/mofangimg/06.png) no-repeat 0 0;
		background-size: cover;
		-webkit-transform:rotateY(90deg) translateZ(100px);
	}
	.maxbox{
		width: 300px;
		height: 300px;
		position: absolute;
		left: 0;
		top: 0;
		-webkit-transform-style: preserve-3d;
	}
	.maxbox li{
		width: 400px;
		height: 400px;
		background: #fff;
		border:1px solid #ccc;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.2;
		-webkit-transition:all 1s ease;
	}
	.maxbox li:nth-child(1){
		-webkit-transform:translateZ(200px);
	}
	.maxbox li:nth-child(2){
		-webkit-transform:rotateX(180deg) translateZ(200px);
	}
	.maxbox li:nth-child(3){
		-webkit-transform:rotateX(-90deg) translateZ(200px);
	}
	.maxbox li:nth-child(4){
		-webkit-transform:rotateX(90deg) translateZ(200px);
	}
	.maxbox li:nth-child(5){
		-webkit-transform:rotateY(-90deg) translateZ(200px);
	}
	.maxbox li:nth-child(6){
		-webkit-transform:rotateY(90deg) translateZ(200px);
	}
	.box:hover ol li:nth-child(1){
		-webkit-transform:translateZ(300px);
		background-image:url(../../img/mofangimg/01.png) ;
		background-size: cover;
	}
	.box:hover ol li:nth-child(2){
		-webkit-transform:rotateX(180deg) translateZ(300px);
		background-image:url(../../img/mofangimg/02.png) ;
		background-size: cover;
	}
	.box:hover ol li:nth-child(3){
		-webkit-transform:rotateX(-90deg) translateZ(300px);
		background-image:url(../../img/mofangimg/03.png);
		background-size: cover;
	}
	.box:hover ol li:nth-child(4){
		-webkit-transform:rotateX(90deg) translateZ(300px);
		background-image:url(../../img/mofangimg/04.png);
		background-size: cover;
	}
	.box:hover ol li:nth-child(5){
		-webkit-transform:rotateY(-90deg) translateZ(300px);
		background-image:url(../../img/mofangimg/05.png);
		background-size: cover;
	}
	.box:hover ol li:nth-child(6){
		-webkit-transform:rotateY(90deg) translateZ(300px);
		background-image:url(../../img/mofangimg/06.png);
		background-size: cover;
	}
	@keyframes move{
		0%{
			-webkit-transform: rotateX(13deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(13deg) rotateY(360deg);
		}
	}